<template>
  <div class="details-content-firth">
    <detail-body title="位置周边" more="查看更多位置周边">
        <div id="container"></div>
    </detail-body>
  </div>
</template>

<script setup>
import DetailBody from '@/components/detail-body/detail-body.vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'

const props = defineProps({
  longitude: {
    type:Number,
    default:0
  },
  latitude: {
    type:Number,
    default:""
  }
})

let map = shallowRef(null);
function initMap(){
    AMapLoader.reset()
    AMapLoader.load({
      key:"3d7a92600032cedef84c19c919c39364",             // 申请好的Web端开发者Key，首次调用 load 时必填
      version:"1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins:['AMap.CitySearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap)=>{
      map = new AMap.Map("container",{  //设置地图容器id
        viewMode:"3D",    //是否为3D地图模式
        zoom:7,           //初始化地图级别
        center:[props.longitude,props.latitude], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  }
initMap()

</script>

<style lang="less" scoped>
#container{
  padding:0px;
  margin: 10px 0;
  width: 100%;
  height: 400px;
}
</style>